<template>
  <!--<div>-->
  <!--<el-button @click="show3 = !show3">Click Me</el-button>-->
  <!--<el-collapse-transition>-->
  <!--<div v-show="show3" class="contain">-->
    <el-row>
      <el-col :span="24">
        <el-menu default-active="2" class="el-menu-css" unique-opened="true">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-date"></i>爬虫任务管理</template>
              <!--<el-menu-item index="1-1" v-on:click="addTabs('1-1', '代理配置管理')">代理配置管理</el-menu-item>-->
              <el-menu-item index="1-2" v-on:click="addTabs('1-2', '爬虫任务配置')">爬虫任务配置</el-menu-item>
              <el-menu-item index="1-3" v-on:click="addTabs('1-3', '任务监控')">任务监控</el-menu-item>
              <el-menu-item index="1-4" v-on:click="addTabs('1-4', '爬虫数据下载')">爬虫数据下载</el-menu-item>
              <el-menu-item index="1-8" v-on:click="addTabs('4-0', '统计图表显示')">统计图表显示</el-menu-item>
              <el-menu-item index="1-5" v-on:click="addTabs('4-2', '查询各省市区平均房价')">查询各省市区平均房价</el-menu-item>
              <el-menu-item index="1-6" v-on:click="addTabs('4-3', '全国各地平均房价地图')">全国各地平均房价地图</el-menu-item>
              <el-menu-item index="1-7" v-on:click="addTabs('4-4', '房价预测')">房价预测</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-message"></i>日志管理</template>
              <el-menu-item index="2-1" v-on:click="addTabs('2-1', '任务日志下载')">任务日志下载</el-menu-item>
              <!--<el-menu-item index="2-2" v-on:click="addTabs('2-2', '动作日志')">动作日志</el-menu-item>-->
              <!--<el-menu-item index="2-3" v-on:click="addTabs('2-3', '异常日志')">异常日志</el-menu-item>-->
              <!--<el-menu-item index="2-4" v-on:click="addTabs('2-4', '权限日志')">权限日志</el-menu-item>-->
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>系统管理</template>
            <el-menu-item index="3-1" v-on:click="addTabs('3-1', '用户管理')">用户管理</el-menu-item>
            <!--<el-menu-item index="3-2" v-on:click="addTabs('3-2', '个人中心')">个人中心</el-menu-item>-->
            <el-menu-item index="3-3" v-on:click="addTabs('3-3', '关于')">关于</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>

    </el-row>
  <!--</el-collapse-transition>-->
  <!--</div>-->
</template>

<script>
  export default {
//    data: () => ({
//      show3: true
//    }),
    methods: {
      addTabs (key, title) {
        this.$store.dispatch('addTab', {'tab': {
          title: title,
          name: key,
//          content: '<proxy></proxy>',
//          proxy: true,
          components: key,
          closed: true
        },
          'activeName': key})
      }
    }
  }

//  {
//    title: 'Tab 2',
//      name: '2',
//    content: 'Tab 2 content',
//    closed: true
//  },
//  {
//    title: 'Tab 3',
//      name: '3',
//    content: 'Tab 3 content',
//    closed: true,
//    create: true
//  }
</script>

<style scoped>
  .contain {
    height: 100%;
    background-color: #1b2737;
  }
  .el-menu-css {
    background-color: #1b2737;
  }

  .el-menu-item {
    background-color: #1b2737;
    font-size: 14px;
    color: #d0dbe8;
  }
  .el-menu-item.is-active {
    background-color: #5a82b8;
    font-size: 14px;
    color: #aeff72;
  }
  .el-submenu {
    font-size: 16px;
  }
</style>

<style>
  .el-submenu__title {
    position: relative;
    font-size: 16px;
    color: #d0dbe8;
  }
</style>
